<template>
    <view :class="ns.b()">
        <view v-for="(item, index) in modelValue" :key="index" class="item">
            <view class="await" v-if="item.status === 'await'">
                <text>等待上传</text>
            </view>
            <image :src="item.path" class="media-image" mode="aspectFill" />
        </view>
        <view class="item add" @click="onUpdated">
            <uni-icons type="plusempty" size="30" color="#999" />
        </view>
    </view>
</template>

<script setup lang="ts">
import { useNamespace } from "@/hooks";

const ns = useNamespace("upload");

const modelValue = defineModel({
    type: Array,
    default: () => []
});

/**
 * @description 文件上传
 * */
const onUpdated = () => {
    uni.chooseMedia({
        count: 9,
        success: ({ tempFiles }) => {
            const result = tempFiles.map((item) => ({
                status: "await",
                path: item.tempFilePath
            }));
            modelValue.value.push(...result);
        }
    });
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
